<template>
	<view class="uni-container">
		<uni-forms>

			<uni-forms-item label="设置标语" name="title" labelWidth="120" border>
				<textarea class="uni-input-border textarea" v-model="comIntroduce.slogan"></textarea>
			</uni-forms-item>
			
			<uni-forms-item label="公司简介" name="title" labelWidth="120">
				<view class="tip-box">
					<view class="tip">标题</view>
					<view class="tip flex-2">内容介绍</view>
					<view class="tip">展示图标</view>
				</view>
				<view  v-if="comIntroduce.content.length" v-for="(item,index) in comIntroduce.content" 
					:key="index" class="content-box" style="border: #aaaaff solid 1px;border-radius: 15rpx;">
					
					<view class="content">
						<view class="show-title" style="padding-left: 15rpx;">{{item.title}}</view>
						<view class="show-title sub flex-2">{{item.subTitle}}</view>
						<view class="icon-box">
							<image class="show-icon" :src="item.iconImg.url" mode="aspectFill"></image>
							<uni-icons @click="sub(index)" size="30" type="minus" style="margin-right: 15rpx;"></uni-icons>
						</view>
					</view>
				</view>
			</uni-forms-item>

			<uni-forms-item label="公司简介" name="title" labelWidth="120">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="flex:1;border: #dedede solid 1px;border-radius: 10rpx;padding: 15rpx;">
						<uni-file-picker  :value="formdata.iconImg" returnType="object" :limit="1" :imageStyles="imageStyles" @success="success"
							file-mediatype="image"  @select="select" mode="grid" title="添加icon图标">
							</uni-file-picker>
						<input class="uni-input-border title" type="text" v-model="formdata.title" placeholder="请输入小标题" />
						<textarea class="uni-input-border textarea" type="text" v-model="formdata.subTitle" placeholder="请输入内容" />
					</view>
					<view style="width:130px;">
						<view @click="add" type="warn" class="add-btn">
							<text class="add-btn-text">添加</text>
							<uni-icons size="25" type="plus"></uni-icons>
						</view>
					</view>
				</view>
			</uni-forms-item>
			
			<!-- <uni-forms-item label="公司简介" name="title" labelWidth="120">
				<view  v-if="comIntroduce.content.length" v-for="(item,index) in comIntroduce.content" :key="index" class="content">
					<uni-file-picker  :value="item.iconImg" :limit="1" :imageStyles="imageStyles" @success="success(index,$event)"
						file-mediatype="image"  @select="select(index,$event)" mode="grid" title="添加icon图标">
						</uni-file-picker>
					<input class="uni-input-border title" type="text" v-model="item.title" placeholder="请输入小标题" />
					<textarea class="uni-input-border textarea" type="text" v-model="item.subTitle" placeholder="请输入内容" />
				</view>
			</uni-forms-item> -->
		</uni-forms>
		<view class="btn-box">
			<button class="btn" type="primary" @click="submitForm">提交</button>
		</view>
	</view>
</template>

<script>
	const getconfigObj = uniCloud.importObject('getconfig', {
		loadingOptions: { // loading相关配置
			title: '处理中...', // 显示的loading内的提示文字。默认值为：加载中...
			mask: true // 是否使用透明遮罩，配置为true时不可点击页面其他内容。默认值为：true
		},
		errorOptions: { // 错误界面相关配置
			type: 'toast', // 错误信息展示方式，可取值：modal（弹框，默认）、toast（toast消息框）。默认值为：modal
			retry: false // 是否展示重试按钮，仅在type为modal时生效。用户点击重试按钮时将重新请求调用的方法，默认为false
		}
	})
	export default {
		data() {
			return {
				"formdata":{
					"iconImg":{},
					"title":"",
					"subTitle":"",
				},
				"comIntroduce": {
					"slogan": "网赚游戏是一款基于uni-app、uniCloud、uniAD 开发的合成类小游戏，通过合成猫、观看广告赚取现金奖励。",
					"content": [{
							"title": "静态收益",
							"subTitle": "每天看视频获取金币升级猫，做任务赚取平台现金红包收益，更有机会获得永久分红猫。",
							"iconImg": {
								"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1eb79d7b-b634-4865-a7c9-d53a43aa537d/deb56600-9c70-4957-9f91-75dbc4459928.png",
								"extname": "png"
							}
						},
						{
							"title": "全民收益",
							"subTitle": "真正的零投资，融合了游戏养成+现金分红，分享推广享下级活跃收益，全民收益躺着也赚钱。",
							"iconImg": {
								"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1eb79d7b-b634-4865-a7c9-d53a43aa537d/6151d277-eac0-45b9-b244-92bbb656ec85.png",
								"extname": "png"
							}
						}
					]
				},
				"imageStyles": {
					"width": 120,
					"height": 120,
					"border": { // 如果为 Boolean 值，可以控制边框显示与否
						"color": "#EEEEEE", // 边框颜色
						"width": "1px", // 边框宽度
						"style": "solid", // 边框样式
						"radius": "10%" // 边框圆角，支持百分比
					}
				}

			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			add() {
				if(Object.keys(this.formdata.iconImg).length === 0){
					uni.showToast({
						title: '请上传图标或输入内容',
						icon:"error"
					});
					return
				}
				if(!this.formdata.title || !this.formdata.subTitle){
					uni.showToast({
						title: '请输入简介内容',
						icon:"error"
					});
					return
				}
				this.comIntroduce.content.push(this.formdata)
				this.formdata = {}
			},
			sub(index) {
				uni.showModal({
					title: '确定删除吗？',
					content: '删除后不可恢复',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if(res.confirm){
							this.comIntroduce.content.splice(index, 1)
						}
					},
					fail: () => {},
					complete: () => {}
				});
				
			},
			getData() {
				getconfigObj.getConfig().then((res) => {
					// console.log("res:-----info ", res);
					this.comIntroduce = res.data[2]
				}).catch((err) => {
					console.log("err: ", err);
				})
			},
			submitForm() {
				getconfigObj.updateConfig({
					"_id": "comIntroduce",
					...this.comIntroduce
				}).then((res) => {
					// console.log("res:-----updateComIntroduce ", res);
					if (res.updated) {
						uni.showToast({
							title: '更新成功！',
							icon: "none",
							duration: 1000
						});
					}else{
						uni.showToast({
							title: '未提交内容！',
							icon: "none",
							duration: 1000
						});
					}
				}).catch((err) => {
					console.log("err: ", err);
				})
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
				
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				this.comIntroduce.content.iconImg = e.tempFiles[0]
				this.formdata.iconImg = e.tempFiles[0]
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}

		}
	}
</script>

<style>
	.uni-container {
		padding: 15px;
	}
	.textarea {
		height: 100px;
		padding-top:15rpx;
	}
	.title{
		width:200px;
		margin: 20rpx 0;
	}

	/deep/ .uni-forms-item__content[data-v-61dfc0d0] {
		display: inline-block !important;
	}

	.content-box {
		margin: 20rpx 0;
	}
	
	.content, .tip-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.show-icon{
		width:60px;
		height:60px;
		/* border:red solid 1px */
	}
	.show-title{
		font-size: 30rpx;
		flex: 1;
		min-height: 80px;
		display: flex;
		align-items: center;
		border-right: 1px solid #aaaaff;
	}
	.sub{
		margin:15rpx;
	}
	.icon-box{
		flex: 1;
		height: 80px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	.tip{
		/* width: 80px; */
		flex:1;
		color: #333;
	}
	.flex-2{
		flex:2;
	}
	
	.btn {
		width: 100px;
	}
	.btn-box{
		max-width:600px;
	}
	
	/deep/ .file-title[data-v-363ace0e]{
		color: #a9a9a9;
	}
	
	.add-btn {
		width: 120px;
		height:35px;
		background-color: #aaaaff;
		border-radius: 25rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-left:15rpx;
		cursor:pointer;
		/* border: #EEEEEE solid 1px; */
	}
	.add-btn-text{
		line-height: 35px;
		margin-right:10rpx;
	}
</style>
